<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">标段</span>
      <el-select class="inline-input" size="medium" v-model="bidSection" clearable placeholder="请选择">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">所属组织</span>
      <el-select class="inline-input" size="medium" v-model="organizationId" clearable placeholder="请选择">
        <el-option v-for="item in organizations" :key="item.depId" :label="item.depName" :value="item.depId" />
      </el-select>

      <span class="txt">员工</span>
      <el-input v-model="staff" clearable size="medium" class="inline-input" placeholder="请输入" />

      <span class="txt">状态</span>
      <el-select class="inline-input" size="medium" v-model="statusId" clearable placeholder="请选择">
        <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <el-button type="primary" icon="el-icon-search" size="medium" style="margin-left:40px" @click="queryListData">查询</el-button>
    </form>

    <TableModel :table-data="salaryStatisticList" :loading="loading">
      <el-table-column prop="fullname" label="员工姓名"></el-table-column>
      <el-table-column prop="username" label="ID"></el-table-column>
      <el-table-column prop="depName" label="所属组织"></el-table-column>
      <el-table-column prop="bidSectionName" label="标段"></el-table-column>
      <el-table-column prop="name" label="班组"></el-table-column>
      <el-table-column prop="salary" label="应发工资"></el-table-column>
      <el-table-column prop="powerlevel" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.powerlevel"
            :disabled="!scope.row.salary"
            active-color="#4688cc"
            :active-value="1"
            :inactive-value="2"
            :active-text="scope.row.status"
            @change="changeSwitch(scope.row.powerlevel, scope.row.userid)" />
        </template>
      </el-table-column>
    </TableModel>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData" />
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import HttpInterface from "../../../util/httpInterface";
import { mapState } from "vuex";

export default {
	name: "SalaryStatistic",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      editModeEnabled: true,
      salaryStatisticList: [],
      staff: "",
      time: "",
      organizationId: "",
      statusId: "",
      bidSection: "",
      status: [
        { id : 1, name : "已发" },
        { id : 2, name : "未发" },
      ],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      }
    };
	},

  computed: {
    ...mapState(["biaoduanList", "organizations"])
  },

  methods: {
    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getSalaryStatisticList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getSalaryStatisticList();
    },

    // 获取数据
    getSalaryStatisticList () {
      this.loading = true;
      let _this = this;
      var params = {
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum
      }
      HttpInterface.requestGet(this, HttpInterface.URL_STATISTICS_SELECT_SALARY_LIST, params, function (response) {
        var { data, code, total } = response.data;
        data.forEach(item => {
          item.status = item.powerlevel == 1 ? "已发" : "未发";
        })

        _this.pageData.total = total;
        _this.salaryStatisticList = data;
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage('获取数据失败！');
      })
    },

    // 查询
    queryListData () {
      this.loading = true;
      let _this = this;
      var params = {
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
        name: this.staff,
        orgname: this.organizationId,
        powerlevel: this.statusId,
        bidSection: this.bidSection
      }
      HttpInterface.requestGet(this, HttpInterface.URL_STATISTICS_SELECT_SALARY_LIST, params, function (response) {
        var { data, code, total } = response.data;
        data.forEach(item => {
          item.status = item.powerlevel == 1 ? "已发" : "未发";
        })

        _this.pageData.total = total;
        _this.salaryStatisticList = data;
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage('获取数据失败！');
      })
    },

    // 状态
    changeSwitch (data, userid) {
      let _this = this;
      let params = {
        userid: userid,
        powerlevel: data
      }
      HttpInterface.requestPost(this, HttpInterface.URL_DUTYUSER_UPDATESTATUS, params, function (response) {
        var data = response.data;
        if (data.success) {
          _this.getSalaryStatisticList();
        }
      }, null, false)
    }
  }
};
</script>

<style  scoped>
.condition_query{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt{
  margin-right: 10px;
  font-size: 14px;
}

.inline-input{
  width: 150px;
  margin-right: 22px;
}

.el-switch >>> .el-switch__label.is-active{
  color: #4688cc;
}

.el-switch >>> .el-switch__label {
  color: #979797;
}
</style>
